<script lang="ts" setup>
import { formRule } from './rule'
import type { ListByUserMessageType, NoticeType } from '../utils/model'
import SpMdEditor from '@/components/SpMdEditor/index.vue'
import { getAllParentIds } from '@/utils/dept'
import type { SysDeptListType } from '@/views/admin/system/dept/utils/model'
import type { SysPostListType } from '@/views/admin/system/post/utils/model'
import type { SysRoleListType } from '@/views/admin/system/role/utils/model'
import type { SysUserListSelectType } from '@/views/admin/system/user/utils/model'
import { getMessageTargetsAPI } from '@/views/admin/system/notice/utils/api'

type Props = {
  data?: ListByUserMessageType
  userList: SysUserListSelectType[]
  roleList: SysRoleListType[]
  postList: SysPostListType[]
  treeData: SysDeptListType[]
}
// 表单Ref

const formRef = ref()
// props
const { userList, data, treeData } = defineProps<Props>()
// 表单数据
const formState = ref<NoticeType>({
  targetIds: [],
  title: '',
  content: '',
  messageType: 'system_notice',
  noticeType: 'all',
  status: 1
})
// 部门选择上的keys
const deptSelectKeys = ref<number[]>()

if (data) {
  Object.assign(formState.value, data)
  if (formState.value.noticeType == 'user') {
    getMessageTargets(data.id as number)
  }
  //处理默认选中
  if (data.noticeType == 'role' || data.noticeType == 'post') {
    if (data.noticeTypeTarget) {
      formState.value.targetIds = data.noticeTypeTarget?.split(',').map((item) => Number(item))
    }
  }
  if (data.noticeType == 'dept') {
    deptSelectKeys.value = getAllParentIds(Number(data.noticeTypeTarget), treeData)
    console.log(deptSelectKeys.value)
  }
}

// 获取通知用户
function getMessageTargets(mid: number) {
  getMessageTargetsAPI(mid, {
    pageNum: 1,
    pageSize: 9999
  }).then((res) => {
    formState.value.targetIds = res.data.rows.map((item) => item.userId)
  })
}

function getRef() {
  return formRef.value
}

const filterOption = (input: any, option: any) => {
  const userIds = userList.filter((item) => item.username.includes(input))
  for (let i = 0; i < userIds.length; i++) {
    if (userIds[i].id == option.value) {
      return true
    }
  }
  return false
}

// 部门选择
function changeDeptSelect(value: number[] | undefined) {
  formState.value.targetIds = [value == undefined ? null : value[value.length - 1]] as number[]
}

const editRef = ref()

defineExpose({ getRef })
</script>

<template>
  <a-form
    ref="formRef"
    :labelCol="{ style: { width: '80px' } }"
    :model="formState"
    :rules="formRule"
    label-align="left"
    style="margin-top: 15px"
  >
    <a-row :gutter="30">
      <a-col :span="24">
        <a-form-item label="标题" name="title">
          <a-input v-model:value="formState.title" placeholder="请输入通知公告标题" />
        </a-form-item>
      </a-col>
      <a-col :span="24">
        <SpDict
          v-model="formState.messageType"
          dict-type="system_message_type"
          label="消息类型"
          name="messageType"
          placeholder="请选择通知公告类型"
        />
      </a-col>
      <a-col :span="24">
        <a-form-item label="通知类型" name="noticeType">
          <a-radio-group
            v-model:value="formState.noticeType"
            @change="() => (formState.targetIds = [])"
          >
            <a-radio value="all">全体用户</a-radio>
            <a-radio value="user">指定用户</a-radio>
            <a-radio value="dept">指定部门</a-radio>
            <a-radio value="post">指定岗位</a-radio>
            <a-radio value="role">指定角色</a-radio>
          </a-radio-group>
        </a-form-item>
      </a-col>
      <a-col v-if="formState.noticeType == 'user'" :span="24">
        <a-form-item label="接收用户" name="targetIds">
          <a-select
            v-model:value="formState.targetIds"
            :filter-option="filterOption"
            mode="multiple"
            placeholder="请选择通知的用户"
          >
            <a-select-option v-for="item in userList" :key="item.id" :value="item.id">{{
              item.username
            }}</a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col v-if="formState.noticeType == 'dept'" :span="24">
        <a-form-item label="接收部门" name="targetIds">
          <a-cascader
            v-model:value="deptSelectKeys"
            :field-names="{ label: 'deptName', value: 'id', children: 'children' }"
            :options="treeData"
            change-on-select
            placeholder="请你选择部门"
            @change="changeDeptSelect"
          />
        </a-form-item>
      </a-col>
      <a-col v-if="formState.noticeType == 'post'" :span="24">
        <a-form-item label="岗位列表" name="targetIds">
          <a-select
            v-model:value="formState.targetIds"
            mode="multiple"
            placeholder="请选择通知的岗位"
          >
            <a-select-option v-for="item in postList" :key="item.id" :value="item.id">{{
              item.postName
            }}</a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col v-if="formState.noticeType == 'role'" :span="24">
        <a-form-item label="角色列表" name="targetIds">
          <a-select
            v-model:value="formState.targetIds"
            mode="multiple"
            placeholder="请选择通知的角色"
          >
            <a-select-option v-for="item in roleList" :key="item.id" :value="item.id">{{
              item.name
            }}</a-select-option>
          </a-select>
        </a-form-item>
      </a-col>

      <a-col :span="24">
        <a-form-item label="通知内容" name="content">
          <SpMdEditor v-model="formState.content" :preview="true" />
        </a-form-item>
      </a-col>
    </a-row>
  </a-form>
</template>

<style scoped></style>
